<nz-table #nzTable nzBordered nzSize="middle" [nzData]="dataSet" [nzShowPagination]="false">
  <thead>
    <tr>
      <th>{{l("serial_number")}}</th>
      <th>{{l('rule_key')}}</th>
      <th>{{l('rule_value')}}</th>
      <th>{{l('operation')}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of nzTable.data;let i=index">
      <td>{{i+1}}</td>
      <td>{{data.itemKey}}</td>
      <td>
        {{data.itemValue}}
        <span *ngIf="data.id=='402880ef65cdc1980165cdfc0bad0006'">
          {{l('km_per_hour')}}
        </span>
        <span *ngIf="data.id=='402880ef65cdc1980165cdfc45310007'">
          {{l('meter')}}
        </span>
        <span *ngIf="data.id=='402880ef65cdc1980165cdfc757d0008'">
          {{l('minutes')}}
        </span>
        <span *ngIf="data.id=='402880ef65cdc1980165cdfca1270009'">
          {{l('frequency')}}
        </span>
      </td>
      <td>
        <a (click)="showModal(data.id)">{{l('config_param')}}</a>
      </td>
    </tr>
  </tbody>
</nz-table>

<nz-modal [(nzVisible)]="isVisible" [nzTitle]="l('modify_param')" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
  [nzOkLoading]="isOkLoading">
  <form nz-form [formGroup]="validateForm">
    <nz-form-item nzFlex>
      <nz-form-label>{{dictionary.itemKey}}(
        <span *ngIf="dictionary.id=='402880ef65cdc1980165cdfc0bad0006'">
          {{l('km_per_hour')}}
        </span>
        <span *ngIf="dictionary.id=='402880ef65cdc1980165cdfc45310007'">
          {{l('meter')}}
        </span>
        <span *ngIf="dictionary.id=='402880ef65cdc1980165cdfc757d0008'">
          {{l('minutes')}}
        </span>
        <span *ngIf="dictionary.id=='402880ef65cdc1980165cdfca1270009'">
          {{l('frequency')}}
        </span>
        )
      </nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="itemValue" [(ngModel)]="dictionary.itemValue" required>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>
